<script setup lang="ts">
import { showDialog } from "vant";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { uploadImgApi } from "@/api/files";
import { getCategoryListApi, addPostApi } from "@/api/post";

const router = useRouter();

const text = ref("");

const form = ref({
  title: "",
  content: "",
  categoryId: 1,
  img: "",
});

const preview = () => {
  console.log(text.value);
  localStorage.setItem("text", text.value);
  router.push({ name: "preview" });
};

interface IImg {
  url: string;
  desc?: string;
  width?: string;
  height?: string;
}
const uploadImage = async (
  event: Event,
  insertImg: (op: IImg) => void,
  file: File[]
) => {
  event.preventDefault();
  if (!text.value)
    return showDialog({
      title: "提示",
      message: "请先输入内容",
    });
  const formData = new FormData();
  console.log(file[0]);
  formData.append("file", file[0]);
  const res = await uploadImgApi(formData);
  console.log(res.data.path);
  insertImg({
    url: "http://localhost:3000/" + res.data.path,
    width: "50%",
  });
};

const categoryList = ref<ICategory[]>();
const getCategory = async () => {
  const res = await getCategoryListApi();
  console.log(res.data, "category");
  categoryList.value = res.data;
};

const currentId = ref(1);
const handleCategory = (id: number) => {
  currentId.value = id;
  form.value.categoryId = id;
};

const show = ref(false);
const fileList = ref([]);
const showActionSheet = () => {
  show.value = true;
};

const afterRead = async (file: any) => {
  const formData = new FormData();
  formData.append("file", file.file);
  const res = await uploadImgApi(formData);
  console.log(res.data.path);
  form.value.img = res.data.path;
};

const save = () => {
  form.value.content = text.value;
  console.log(form.value);
  addPostApi(form.value).then((res) => {
    console.log(res);
    showDialog({
      title: "提示",
      message: "发布成功",
    });
  });
  show.value = false;
};

onMounted(() => {
  getCategory();
});
</script>

<template>
  <div class="add">
    <van-nav-bar title="添加文章" right-text="预览" @click-right="preview" />
    <div class="add__header">
      <div class="add__header-title">
        <van-form>
          <van-cell-group>
            <van-field
              v-model="form.title"
              label="文章标题"
              placeholder="请输入文章标题"
              :rules="[{ required: true, message: '请输入文章标题' }]"
            />
          </van-cell-group>
        </van-form>
      </div>
      <div class="add__header-category">
        <div
          v-for="item in categoryList"
          :key="item.id"
          @click="handleCategory(item.id)"
        >
          <van-tag type="primary" :plain="item.id !== currentId" size="large">{{
            item.name
          }}</van-tag>
        </div>
      </div>
    </div>
    <v-md-editor
      v-model="text"
      height="600px"
      mode="edit"
      right-toolbar="full"
      :disabled-menus="[]"
      @upload-image="uploadImage"
      @save="showActionSheet"
    ></v-md-editor>

    <van-action-sheet v-model:show="show" title="选择封面">
      <div class="add__sheet">
        <van-uploader
          :after-read="afterRead"
          v-model="fileList"
          :max-count="1"
        />

        <van-button @click="save">发布文章</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>
